<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:c="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
</head>
<body>
    <div th:replace="common/IncludeTop">
    </div>

    <div id="Content">>

        <link rel="stylesheet" href="../css/signon.css" type="text/css" media="screen" />
        <script src="../js/jquery-3.4.1.js"></script>
        <script type="text/javascript">
            function loadXMLHttp(){
                var xmlhttp;
                var username=document.getElementById("username").value;
                var password=document.getElementById("password").value;
                var inputValidCode=document.getElementById("inputValidCode").value;
                if(username==""||username==null){
                    document.getElementById("message").innerHTML="Please input your username";
                }else if(password==""||password==null){
                    document.getElementById("message").innerHTML="Please input your password";
                }
                else if(inputValidCode==""||inputValidCode==null){
                    document.getElementById("message").innerHTML="Please input the valid code";
                }

                if(window.XMLHttpRequest){
                    xmlhttp=new XMLHttpRequest();
                }else{
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }

                xmlhttp.onreadystatechange=function(){
                    if(xmlhttp.readyState==4&&xmlhttp.status==200){
                        if(xmlhttp.responseText == "wrong valid code"){
                            document.getElementById("message").innerHTML=" Wrong Valid Code";
                        }
                        else if(xmlhttp.responseText == "wrong password"){
                            document.getElementById("message").innerHTML=" Wrong Password";
                        }
                        else if (xmlhttp.responseText == "banned"){
                            document.getElementById("message").innerHTML=" The account is banned";
                        }
                        else if(xmlhttp.responseText == "right"){
                            window.location.href="/catalog/view";
                        }
                        else{
                            window.location.href="/catalog/viewAdminmain";
                        }
                    }
                };
                xmlhttp.open("post","/account/login",true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send("username="+username+"&password="+password+"&inputValidCode="+inputValidCode);
            }
        </script>

        <div id="Catalog">
            <form action="#">
                <fieldset>
                    <div id="BackLink">
                        <a href="/catalog/view">Return to Main Menu</a>
                    </div>

                    <legend>Please enter your username and password</legend>
                    <div class="login">
                        <div>
                            <label for="username" class="title">Username:</label>
                            <input type="text" name="username" id="username" /><br />
                        </div>
                        <div>
                            <label for="password" class="title">Password:</label>
                            <input type="password" name="password" id="password" /><br />
                        </div>

                        <div>
                            <script type="text/javascript">
                                function changeImg(){
                                    var _img=document.getElementById("_img");
                                    var time=new Date().getTime();//浏览器认为相同的动作(被过滤)没必要应答,所以用时间值改变src值(即请求)(事实上是同一请求)
                                    _img.src="/verification?"+time;//用js改变请求的地址
                                }
                            </script>
                        </div>
                        <div>
                            <label for="inputValidCode" class="title" >ValidCode:</label>
                            <input type="text" name="inputValidCode" id="inputValidCode"><br />
                            <img id="_img" src="/verification" class="picture"/>&nbsp &nbsp
                            <a href="javascript:changeImg();">Change</a>
                        </div>

                    </div>

                    <input type="button" value="Login" id="submit"  onclick="loadXMLHttp()">

                    <font color="red" id="message"></font>
                </fieldset>
            </form>

            Need a user name and password? <a href="newAccount">Register Now!</a>

        </div>


    </div>

    <div th:replace="common/IncludeBottom">
    </div>
</body>
</html>